/**
 * 条件渲染 （v-if）
 *
 *    1. 直接使用 if 判断
 *    2. 使用 三元表达式  ? :
 *    3. 使用 &&
 *
 * 列表渲染 （v-for）
 *
 *    知识点：插值表达式中直接渲染一个元素为 JSX 类型数组，就可以做到列表渲染
 *
 *    使用 map 来操作
 *
 * 如何实现一个 v-show 类似的操作
 *    控制 元素的 style
 *
 * key 的作用
 *    与 Vue 中 key 的作用一致，为了给虚拟节点一个唯一标识，在 DOM 比对时能够做优化。
 */

const isShow = false;

export default function App() {
  return (
    <div>
      <h1>App</h1>
      <button style={{ display: isShow ? "block" : "none" }}>Hello</button>

      {isShow && <button>World</button>}
    </div>
  );
}

// let fruits = [
//   <li key={1}>Apple</li>,
//   <li key={2}>Banana</li>,
//   <li key={3}>Orange</li>,
// ];

// let books = ["西游记", "红楼梦", "三国演义", "水浒传"];

// export default function App() {
//   let result = [];
//   for (let i = 0; i < books.length; i++) {
//     result.push(<li key={i}>{books[i]}</li>);
//   }

//   return (
//     <div>
//       <h1>App</h1>

//       <ul>{fruits}</ul>

//       <hr />

//       <ul>{result}</ul>

//       <hr />
//       <ul>
//         {books.map((item, index) => {
//           return <li key={index}>{item}</li>;
//         })}
//       </ul>
//     </div>
//   );
// }

// let isLogin = false;
// let isShow = false;

// if 判断
// export default function App() {
//   let vNode = (
//     <div>
//       <button>登录</button>
//     </div>
//   );

//   if (isLogin) {
//     vNode = (
//       <div>
//         <h2>欢迎你，xxx</h2>
//       </div>
//     );
//   }

//   return (
//     <div>
//       <h1>App</h1>

//       {vNode}

//       {/* <div>
//         <h2>欢迎你，xxx</h2>
//       </div>

//       <div>
//         <button>登录</button>
//       </div> */}
//     </div>
//   );
// }

// 三元表达式
// export default function App() {
//   return (
//     <div>
//       <h1>App</h1>
//       {isLogin ? (
//         <div>
//           <h2>欢迎你，xxx</h2>
//         </div>
//       ) : (
//         <div>
//           <button>登录</button>
//         </div>
//       )}
//     </div>
//   );
// }

// &&
// export default function App() {
//   return (
//     <div>
//       <h1>App</h1>

//       {/* {isShow && <button>显示</button>} */}

//       {isShow ? <button>显示</button> : null}
//     </div>
//   );
// }
